<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 08:54:35
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-11-27 20:08:39
-->
<template>
  <div>
    <!-- 医院名称 -->
    {{ name }}
    <!-- 返回按钮 -->
    <el-button type="primary" style="float: right" @click="GoOut()"
      >返回</el-button
    >
    <div id="hospitalmap"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  data() {
    return {
      // 此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      // map:null,
      // marker:null
      name: this.$route.query.name,
      latitude: this.$route.query.latitude + '',
      longitude: this.$route.query.longitude + ''
    }
  },
  created() {
    // console.log(123)
    // console.log(this.longitude)
    // console.log(this.latitude)
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    // 创建地图
    initMap() {
      AMapLoader.load({
        key: 'd7a35499ceae9b279c3c4948bb99c516', // 设置的key
        version: '2.0',
        plugins: [
          'AMap.ToolBar',
          'AMap.Driving',
          'AMap.Geolocation',
          'onComplete'
        ],
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '2.0'
        }
      })
        .then((AMap) => {
          console.log(111111111111111)
          // 设置地图容器id
          this.map = new AMap.Map('hospitalmap', {
            viewMode: '2D', // 是否为3D地图模式
            zoom: 12, // 初始化地图级别
            center: [this.longitude, this.latitude] // 初始化地图中心点位置
          })
          // 创建标记物
          this.marker = new AMap.Marker({
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            position: [this.longitude, this.latitude]
          })
          // 在医院位置添加图层标记
          this.map.add(this.marker)
          console.log(222222222)
          // 获取当前定位
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0, // 定位结果缓存0毫秒，默认：0
            convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, // 显示定位按钮，默认：true
            buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          })
          this.map.addControl(geolocation)
          geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
              onComplete(result)
            } else {
              onError(result)
            }
          })
          function onComplete(data) {
            console.log(123321)
            // data是具体的定位信息
            console.log(data)
          }
          function onError(data) {
            // 定位出错
            console.log(data)
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    GoOut() {
      this.$router.push({
        path: 'index'
      })
    }
  }
}
</script>

<style scoped>
#hospitalmap {
  width: 100%;
  height: 670px;
  padding: 0;
  margin: 0;
}
</style>
